<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/6/15
  Time: 下午12:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/resources.jsp" %>

<html>
<head>
    <link rel="stylesheet" href="/ems/css/tree/bootstrap-treeview.min.css">
    <script src="/ems/js/tree/bootstrap-treeview.min.js"></script>
    <title>区县代理000</title>
    <style type="text/css">
        .area_select {
            background: #fff;
            height: 35px;
        }
        .search_service_center {
            margin-top: 10px;
            width: 150px;
        }
        .search_result {
            margin-top: 10px;
            display: none;
        }

        .search_result img {
            height: 72px;
            width: 72px;
            border-radius: 72px;
        }
        .search_user_info {
            text-align: center;
            float: left;
            padding: 10px;
            cursor: pointer;
        }
        .search_user_info_select {
            background-color: rgba(244, 239, 138, 0.4);
        }
        .search_user_info p{
            margin-top: 5px;
            margin-bottom: 0;
        }
    </style>
</head>
<body>

<div class="ems_form">
    <div class="panel panel-default">
        <div class="panel-heading ems_add_heading">
            <h3 class="panel-title" style="color: inherit;">区县代理新增</h3>
            <div class="ems_add_gbtn">
                <button type="button" class="btn btn-primary ems_form_submit">
                    <span class="glyphicon glyphicon-check"></span> 保存
                </button>
                <button type="button" class="btn btn-default ems_form_reset">
                    <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                </button>
            </div>
        </div>

        <div class="ems_edit_content">
            <form class="form-horizontal ems_internal_form">
                <div class="form-group">
                    <label class="col-sm-3 control-label">姓名：</label>
                    <div class="col-sm-9">
                        <input type="text" required name="real_name" value="${servicecenter.real_name}" class="form-control" placeholder="请填写真实姓名">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">手机：</label>
                    <div class="col-sm-9">
                        <input type="number" required name="phone" value="${servicecenter.phone}" class="form-control" placeholder="请填写手机号">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">邮箱：</label>
                    <div class="col-sm-9">
                        <input type="email" name="email" value="${servicecenter.email}" class="form-control" placeholder="邮箱">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">身份证号：</label>
                    <div class="col-sm-9">
                        <input type="text" required name="id_card_no" minlength="18" maxlength="18" value="${servicecenter.id_card_no}" class="form-control" placeholder="请填写身份证号">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">缴纳金额：</label>
                    <div class="col-sm-9">
                        <input type="text" required name="pay_amount" min="0" value="${servicecenter.pay_amount}" class="form-control" placeholder="请填写区县已缴纳的费用">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">app账号：</label>
                    <div class="col-sm-9">
                        <input type="text" id="app_account" class="form-control" placeholder="请输入昵称或手机号查找">
                        <button type="button" class="search_service_center btn btn-primary">搜索账号</button>
                        <div class="search_result panel panel-default">
                            <div class="panel-body">
                                <c:if test="${ not empty servicecenter.id}">
                                    <div class="search_user_info search_user_info_select" sid="${servicecenter.user.id}" >
                                        <img src="${servicecenter.user.head_photo}" />
                                        <p>${servicecenter.user.nick_name}</p>
                                    </div>
                                </c:if>
                                <c:if test="${empty servicecenter.id}">
                                    <div class="search_user_info"></div>
                                </c:if>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">地址：</label>
                    <div class="col-sm-9">
                        <div id="area_select_div">
                            <select class="area_select" name="province"  required></select>
                            <select class="area_select" name="city"  required></select>
                            <select class="area_select" name="county" required></select>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">详细地址：</label>
                    <div class="col-sm-9">
                        <textarea class="form-control" rows="3" name="address" placeholder="请填写详细地址" required>${servicecenter.address}</textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/ems/js/distpicker.min.js"></script>
<script>

    $(".search_service_center").bind("click",function () {
        $.emsAjax({
            url:"/ems/servicecenter/search",
            data:{searchName:$("#app_account").val(),snew:1},
            success:function (resp) {
                if (resp.status != "000") {
                    $.errorAlert(resp.message);
                    return;
                }else {
                    $(".search_user_info").remove();
                    $(".search_result").show();
                    $(".search_result").find(".panel-body")
                        .append('<div class="search_user_info" sid="'+resp.data.id+'"><img src="'+resp.data.head_photo+'"> <p>'+resp.data.nick_name+'</p></div>');
                    $(".search_user_info").on("click",function () {
                        $(this).toggleClass("search_user_info_select");
                    });
                }
            }
        })
    });

    function saveservicecenter(data) {
        $.emsAjax({
            url:"/ems/servicecenter/save",
            type:"POST",
            data:data,
            success:function (resp) {
                if (resp.status == "000") {
                    $.alert(resp.message,null,null,function () {
                        window.location.href = "/ems/servicecenter/index";
                    })
                }else {
                    $.errorAlert(resp.message);
                }
            }
        })
    }

    $.validator.setDefaults({
        //认证成功
        submitHandler: function(form) {
            var data = {};
            $(".ems_internal_form").find("input,textarea,select").each(function (index,value) {
                data[$(value).attr("name")] = $.trim($(value).val())
            })
            data["id"] = '${servicecenter.id}';

            $serach_user = $(".search_user_info_select");
            if ($serach_user.length == 0) {
                $.errorAlert("请先查询勾选app账号");
                return;
            }
            data["user_id"] = $serach_user.attr("sid");
            saveservicecenter(data);
        }
    });

    $(function () {
        // 手机号码验证
        jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");

        $(".ems_internal_form").validate({
            rules: {
                phone : {
                    required : true,
                    minlength : 11,
                    isMobile : true
                }
            },
            messages: {
                phone : {
                    required : "请输入手机号",
                    minlength : "手机不能小于11个字符",
                    isMobile : "请正确填写您的手机号码"
                }
            }
        });

        $(".ems_form_submit").on("click",function () {
            var form = $(this).parents(".ems_form").find("form:first");
            form.submit();
        });

        $(".ems_form_reset").on("click",function () {
            $(this).parents(".ems_form").find("form:first")[0].reset();
        })

        if ('${servicecenter.id}') {
            $('#area_select_div').distpicker({
                province: '${servicecenter.province}',
                city: '${servicecenter.city}',
                district: '${servicecenter.county}'
            });
            $(".search_result").show();
        }else {
            $('#area_select_div').distpicker({
                province: '广东省',
                city: '广州市',
                district: '天河区'
            });
        }
    });
</script>
</body>
</html>
